import React,{Component,Fragment} from 'react'
import {Card,Button,Modal} from 'antd'


//文档：https://jpuri.github.io/react-draft-wysiwyg
import { EditorState, convertToRaw, ContentState } from 'draft-js'
import { Editor } from 'react-draft-wysiwyg'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
//将编辑器内容转化为html
import draftToHtml from 'draftjs-to-html'
import htmlToDraft from 'html-to-draftjs'

export default class Rich extends Component {
    constructor(props) {
        super(props)
        //初始化
        this.state = {
            editorState: '',
            contentState:'',
            isShowModal:false,
            content:''
        };
    }
    onEditorStateChange = (EditorState) => {
        this.setState({
            editorState:EditorState
        });
        //文本有变化
        //console.log(draftToHtml(convertToRaw(editorState.getCurrentContent())))
    }
    onContentStateChange = (contentState) => {
        this.setState({
            contentState,
        });
    };

    clearContent = () => {
        this.setState({
            editorState:'',
            contentState: ''
        })
    }
    //获取html文本
    getContent = () => {
        const editorState = this.state.editorState
        if(!editorState) {
            return
        }
        //draftToHtml(convertToRaw(editorState.getCurrentContent()))
        this.setState({
            isShowModal:true,
            content:draftToHtml(convertToRaw(editorState.getCurrentContent()))
        })
    }
    //将固定内容转换为编辑器里面的内容
    htmlToJs = () => {
        let html = `<ul> <li><strong>1213</strong>😁</li> </ul>`
        let contentBlock = htmlToDraft(html);
        if (contentBlock) {
            let contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
            //最终变成editorState
            let editorState = EditorState.createWithContent(contentState)
            this.setState({
                editorState,
                contentState
            })
        }
    }
    render() {
        return (
            <Fragment>
                <Card>
                    <Button type="primary" onClick={this.clearContent}>清空内容</Button>
                    <Button type="primary" onClick={this.getContent}>取HTML文本</Button>
                    <Button type="primary" onClick={this.htmlToJs}>将固定的文本转化为到编辑器</Button>
                </Card>
                <Card title="富文本编辑器">
                    {/* <Editor
                        editorState={this.state.editorState}
                        onEditorStateChange={this.onEditorStateChange}
                        onContentStateChange={this.onContentStateChange}
                    /> */}
                    <Editor
                        editorState={this.state.editorState}
                        onEditorStateChange={this.onEditorStateChange}
                    />
                </Card>
                <Modal 
                    title="富文本"
                    visible={this.state.isShowModal}
                    onCancel = {() => {
                        this.setState({
                            isShowModal:false,
                            content:''
                        })
                    }}
                    footer={false}
                >
                    {this.state.content}
                </Modal>
            </Fragment>
        )
    }
}